<template>
	<view class="box bg-white roundedtx30 px-4">
		<view class="d-flex" style="height: 15px;"></view>
		<view class="d-flex j-sb">
			<text class="font-md5" style="height: 80rpx;">选择问题</text>
			<view class="d-flex position-absolute top-0 right-0" @tap.stop="close" style="width: 50px;height: 42px;">
				<text class="d-flex position-absolute left-15 bottom-10 iconfont icon-guanbi2 text-black2 font-weight" style="font-size: 18px;"></text>
			</view>
		</view>

		<view class="d-flex j-sb">
			<text @tap="select_index=0" :class="select_index===0?'fk_select_type':'fk_unselect_type bg-lightbg'">播放卡顿</text>
			<text @tap="select_index=1" :class="select_index===1?'fk_select_type':'fk_unselect_type bg-lightbg'">黑屏</text>
			<text @tap="select_index=2" :class="select_index===2?'fk_select_type':'fk_unselect_type bg-lightbg'">无声音</text>
		</view>
		
		<view class="d-flex a-center" style="height: 90rpx;">
			<text class="d-flex mt-2 font-md5">补充描述</text>
		</view>

		<view class="bg-lightbg rounded10" style="height: 322rpx;">
			<view class="input_class" style="height: 70%;">
				<textarea cursor="0" placeholder-class="placeholder" placeholder="请描述你的问题" />
			</view>

			<view class="d-flex j-sb">
				<view></view>
				<view style="color: #969696;font-size: 30rpx;margin-right: 3%;">(0/100)</view>
			</view>
		</view>

		<view class="d-flex a-center" style="height: 90rpx;">
			<text class="d-flex mt-2 font-md5">联系方式</text>
		</view>

		<view class="bg-lightbg rounded10" style="height: 96rpx;">
			<view class="input_class" style="height: 100%;">
				<textarea cursor="0" placeholder-class="placeholder" placeholder="手机号/微信号" />
			</view>
		</view>

		<view class="d-flex a-center" style="height: 80rpx;">
			<text class="font-sm3">为了更好解决您的问题，请留下您的联系方式</text>
		</view>

		<view class="d-flex j-sb">
			<view class="btn_class" style="background: #FFFFFF;color:#6C6C6C;">取消</view>
			<view class="btn_class" style="background: #E68B3E;color:#FFFFFF;">提交</view>
		</view>

	</view>
</template>


<script>
	import tools from "@/utils/tools.js"
	export default {
		name: "vdfk",
		props: {
			curInfo: {

			}
		},
		data() {
			return {
				select_index: 0,
			}
		},
		watch: {

		},
		created() {
			this.loadvdlist();
		},
		methods: {
			close() {
				this.$emit('closeFk', {});
			},
			loadvdlist() {

			},
			getLevelStr(num) {
				return tools.intToChinese(num)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 10rpx;
		background-color: #ffffff;
		height: 80vh;
		/* padding: 0 30rpx 104rpx 30rpx; */
	}

	.placeholder {
		// width: 266rpx;
		// height: 56rpx;
		font-size: 38rpx;
		// font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #969696;
		line-height: normal;
		vertical-align: top;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	.input_class {
		width: 100%;
		font-family: 'Open Sans', sans-serif;
		background-color: transparent;
		color: black;
		padding: 20rpx 0;
		padding-left: 20upx;
	}

	.fk_unselect_type {
		font-size: 30rpx;
		color: #3D3D3D;
		height: 66rpx;
		width: 210rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.fk_select_type {
		font-size: 30rpx;
		color: #FFFFFF;
		height: 66rpx;
		width: 210rpx;
		background: #E68B3E;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.btn_class {
		width: 314rpx;
		height: 68rpx;
		justify-content: center;
		display: flex;
		align-items: center;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		border: 2rpx solid #EBEBEB;
	}
</style>